<template>
  <div>
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">标品冲锋月报</div>
      </div>
    </div>
    <div class="timeDateForm">
      <el-form :inline="true">
        <el-form-item label="账期">
          <el-date-picker
            v-model="month"
            size="mini"
            type="month"
            value-format="yyyyMM"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="mini"
            >查询</el-button
          >
          <el-button size="small" type="orange" @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div id="pdfDom">
      <page1 ref="page1"></page1>
      <page2 ref="page2"></page2>
      <page3 ref="page3"></page3>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import page1 from "./page1/index.vue";
import page2 from "./page2/index.vue";
import page3 from "./page3/index.vue";
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";

export default {
  components: {
    page1,
    page2,
    page3,
  },
  data: function () {
    return {
      month: this.moment().subtract(1, "months").format("YYYYMM"),
      time: Date.parse(new Date()),
    };
  },
  mounted() {
    const { month } = this;
    this.$refs.page3.init(month);
    this.$refs.page1.init(month);
    this.$refs.page2.init(month);
  },
  methods: {
    handleSearch() {
      const { month } = this;
      this.$refs.page3.init(month);
      this.$refs.page1.init(month);
      this.$refs.page2.init(month);
    },
    //获取当前时间
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y.toString() + MM.toString();
    },

    handleExport() {
      axios({
        method: "get",
        url: "/api/cloudStandardOne/exportCloudStandardPPT",
        responseType: "blob",
        params: {
          month: this.month,
          token: getCookie("token"),
        },
        headers: {
          "content-type": "application/json",
        },
      })
        .then(function (response) {
          console.log(response);
          if (response.data.type == "application/octet-stream") {
            const filename = response.headers["content-disposition"];
            const blob = new Blob([response.data]);
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = "账期_标品“冲锋”专班月报.pptx";
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#pdfDom {
  min-height: 500px;
  margin-top: -10px;
  //   background: red;
}
</style>